import React,{useImperativeHandle}from 'react'
import { Form, Input,Cascader,message} from 'antd';
import {useSelector,useDispatch} from 'react-redux';
import getCateAction from '../../../redux/action/getCateAction';
function GoodsInfo(props:any,ref:any) {
    // 创建form表单组件实例
    let [form] = Form.useForm();
    let cateList:CateItem[] = useSelector((state:StoreStateType)=>{
        return state.cateReducer.cateList
    })
    let dispatch = useDispatch<any>();
    if(cateList.length ===0){
        dispatch(getCateAction())
    }
    useImperativeHandle(ref,()=>{
        return {
            form
        }
    })
    return (
        <div>
            <Form layout='vertical' form={form}>

                <Form.Item
                    label="商品名称"
                    name="goods_name"
                    rules={[{ required: true, message: '请输入商品名称' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="商品价格"
                    name="goods_price"
                    initialValue='0'
                    rules={[{ required: true, message: '请输入商品价格' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="商品重量"
                    name="goods_weight"
                    initialValue='0'
                    rules={[{ required: true, message: '请输入商品重量' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="商品库存"
                    name="goods_number"
                    initialValue='0'
                    rules={[{ required: true, message: '请输入商品库存' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="商品分类"
                    name="goods_cat"
                    rules={[{ required: true, message: '请输入商品分类' }]}
                >
                   <Cascader placeholder='请选择商品分类' fieldNames={{
                    label:"cat_name",
                    value:"cat_id",
                    children:"children"
                   }} options={cateList} onChange={(value)=>{
                    console.log(value)
                    if(value.length<3){
                        message.warning("分类必须为三级分类");
                        // 将good_cat表单属性设置为空
                        form.setFieldValue("goods_cat",[])
                    }   
                   }}/>
                </Form.Item>
            </Form>
        </div>
    )
}
export default React.forwardRef(GoodsInfo)